﻿body {
    background:#f1f1f1;
}

.clearfix:after { content: "."; display: block; height: 0; visibility: hidden; clear: both; }

ul { }
ul li { display:inline-block;width:400px; height:300px; background:#000;text-align:center;position:relative;
        -webkit-perspective: 1700px;
        -moz-perspective: 1700px;
        perspective: 1700px;
        -webkit-perspective-origin: 0 50%;
        -moz-perspective-origin: 0 50%;
        perspective-origin: 0 50%;
}

ul li .figure-wrap { 
    height:100%;
    -webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

ul li .figure-wrap > div { 
    width:400px; height:300px;
    overflow:hidden;
    display: table-cell;
    vertical-align:middle;
}

ul li figure { 
    position: absolute;
    top: 0;
    left: 0;
    background: #4d4d4d;
    height: 280px;
	width: 180px;
    color:#fff;
    margin:0;
    font-family:sans-serif;
    text-align:left;
    padding:10px;

	opacity: 0;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: rotateY(-90deg);
	-moz-transform: rotateY(-90deg);
	transform: rotateY(-90deg);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
	-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
	transition: transform 0.4s, opacity 0.1s 0.3s;
}

ul li .figure-wrap:hover figure {
	opacity: 1;
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	transform: rotateY(0deg);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
	-moz-transition: -moz-transform 0.4s, opacity 0.1s;
	transition: transform 0.4s, opacity 0.1s;
}

ul li .figure-wrap img {
	-webkit-transition: -webkit-transform 0.4s;
	-moz-transition: -moz-transform 0.4s;
	transition: transform 0.4s;
}

ul li .figure-wrap:hover img {
	-webkit-transform: translateX(100px);
	-moz-transform: translateX(100px);
	-ms-transform: translateX(100px);
	transform: translateX(100px);
}

/* layout */
h3 { font-weight:normal;font-size:16px;color:#b7d6ff;}
p { font-size:12px;color:#999;}
a { display:inline-block;padding:5px 10px;background:#01439c;color:#fff;font-size:12px;text-decoration:none;border-radius:5px;position:absolute;bottom:10px;right:10px;}

